css设置打印样式@page

您所在的位置：网站首页 › chrome 打印设置页脚 › css设置打印样式@page

css设置打印样式@page

2024-07-11 04:49| 来源: 网络整理| 查看: 265

浏览器打印

浏览器自带的打印功能很早之前就有了，所以基本所有浏览器都支持。

我们通过 window.print() 、document.execCommand('print’) 、页面右键菜单打印等方式都可以调起打印。

不同浏览器的区别：在Safari和Chrome都会弹起打印预览的窗口，FireFox没有预览而是直接让你选择打印机，OSx下可以通过预览PDF来预览~

但是直接使用浏览器打印虽然省事，但是存在很多问题，无法满足我们的打印需求：

打印的是整个网页，不能打印局部内容；打印不支持自定义分页行为，默认不支持批量打印；打印的时候样式有问题，所见非所得；打印可以准确识别的样式单位是绝对单位（如pt、mm、cm），对相对单位识别不同打印机可能会得到意想不到的结果；

CSS 打印样式 1、@media print

那么怎么控制我们打印内容的样式呢？其实就是将我们的打印样式传给打印机，引入打印文件一般有三种方式。

// 第一种：媒体查询 @media print @media print { body { background-color: white; } img { visibility: hidden; } a::after { content: "(" attr(href) ")"; /* 所有链接后显示链接地址 */ } } // 第二种：CSS 中使用 @import … print @import url("my-print-style.css") print; // 第三种：在 HTML 中使用标签

【本文地址】

css设置打印样式@page

css设置打印样式@page

今日新闻

推荐新闻